tower-pattern show-room responsieve teksttegel met masker

Probleem

1. Het masker komt bovenop de teksttegel. De achtergrond van het masker is doorzichtig om de achtergrond van de teksttegel nog te laten doorschemeren. Maar de
2. Het masker bevat andere inhoud dan de teksttegel en moet dus html elementen kunnen opmaken.

Design

Het masker a element moet als eerste html element op de tegel staan. De bedoeling van de sibling selectors is dat de tekst op de tegel alleen verdwijnt als er een mask is voorzien.

We voorzien dat een masker de volgende html elementen kan bevatten. Je kan er zo als je wilt eraan toevoegen:

• heeft een ondertitel h2;
• heeft een tekst p;

Het masker kan geanimeerd worden door het toevoegen van een zusterklasse aan de klasse tile.

Oplossing

/*  showroom-tile-mask.css
    clickable tile or mask
    a little usability fix applied via class, and a toolbox class
    for hiding the text but leaving it accessible */
.showroom a.tile, .showroom a.mask {
    text-decoration: none;
    display: inline-block; /* Fix for clickability issue in WebKit */
}

.showroom > .tile .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    display: none;
}

.showroom > .tile .mask h2 {
    text-transform: uppercase;
    -webkit-text-transform: uppercase;
    -moz-text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 4vh;
    padding: 0 10px 0 10px;
    margin: 8px 0 0 0;
}

.showroom > .tile .mask p {
    font-style: italic;
    font-size: 2.5vh;
    position: relative;
    color: #fff;
    padding: 0 4% 6% 4%;
    text-align: center;
}

/* Wordt nogal moeilijk. De bedoeling van de sibling selectors is dat de tekst op de tegel
    alleen verdwijnt als er een mask is voorzien. De mask moet wel voor de html elementen
    staan die op de teskttegel staan. De sibling selector selecteert alleen de
    zusterelementen die erna komen.
    */
.showroom > .tile.hover:hover .mask ~ * {
    display: none;
}

/*----------------------------------- bouncing mask ------------------------------------*/
.showroom > .tile.hover:hover .mask.view-bounce {
    top: 0px;
    display: block;
    background: rgba(91,98,88, 0.8);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: bounceY 0.7s linear;
    animation: bounceY 0.7s linear;
}


/*------------------------ fade-in-left ---------------------------*/
.showroom > .tile.hover:hover .mask.fade-in-left {
    top: 0px;
    display: block;
    background: rgba(91,98,88, 0.8);
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

/*------------------------ rotate-in ---------------------------*/
.showroom > .tile.hover:hover .mask.rotate-in {
    top: 0px;
    display: block;
    background: rgba(91,98,88, 0.8);
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

Gebruik

De HTML vind je in tower-pattern showroom.

Je hebt de volgende css bestandig nodig:

<link type="text/css" rel="stylesheet" href="css/tower.css">
<link type="text/css" rel="stylesheet" href="css/logo.css">
<link type="text/css" rel="stylesheet" href="css/floor.css">
<link type="text/css" rel="stylesheet" href="css/control-panel.css">
<link type="text/css" rel="stylesheet" href="css/iconfont.css">
<link type="text/css" rel="stylesheet" href="css/showroom.css">
<link type="text/css" rel="stylesheet" href="css/showroom-tile.css">
<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="css/app.css">

En het resultaat: